<template>
  <div class="app-container">
    <basic-container>
      <el-form :inline="true" :model="searchForm" ref="searchForm">
        <el-form-item>
          <el-select v-model="searchForm.roomId" filterable placeholder="请选择教室">
            <el-option
                v-for="item in roomList"
                :key="item.roomId"
                :label="item.roomName"
                :value="item.roomId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" filterable placeholder="请选择状态">
            <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.text"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.typeId" filterable placeholder="请选择用途">
            <el-option
                v-for="item in purposeList"
                :key="item.purposeId"
                :label="item.purposeName"
                :value="item.purposeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="searchForm.startTime"
              type="datetimerange"
              @change="dateChangebirthday1"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">搜 索</el-button>
          <el-button type="default" @click="resetSearch('searchForm')">重 置</el-button>
        </el-form-item>
      </el-form>
      <vxe-table
          border
          resizable
          highlight-hover-row
          show-overflow
          show-footer
          ref="xTable1"
          :loading="loading"
          :footer-method="footerMethod"
          @toggle-row-expand="toggleExpandEvent"
          :data="tableData">
        <vxe-table-column type="expand" width="50" align="center">
          <template v-slot:content="{ row, rowIndex }">
            <vxe-table
                highlight-hover-row
                auto-resize
                show-overflow
                row-id="id"
                ref="xTable1"
                :data="row.mrRecordDtlDto">
              <vxe-table-column field="materialName" title="物资名称"></vxe-table-column>
              <vxe-table-column field="number" title="数量"></vxe-table-column>
              <vxe-table-column field="price" title="单价"></vxe-table-column>
              <vxe-table-column field="amts" title="金额"></vxe-table-column>
              <vxe-table-column field="remark" title="备注说明"></vxe-table-column>
            </vxe-table>
          </template>
        </vxe-table-column>
        <vxe-table-column field="statusName" title="状态" min-width="80"></vxe-table-column>
        <vxe-table-column field="roomName" title="会议室" min-width="90"></vxe-table-column>
        <vxe-table-column field="subject" title="主题" min-width="120"></vxe-table-column>
        <vxe-table-column field="purposeName" title="教室用途" min-width="80"></vxe-table-column>
        <vxe-table-column field="applicantName" title="申请人" min-width="80"></vxe-table-column>
        <vxe-table-column field="deptName" title="申请部门" min-width="80"></vxe-table-column>
        <vxe-table-column field="userNumber" title="参会人数" min-width="80"></vxe-table-column>
        <vxe-table-column field="otherRemark" title="其他需求" min-width="80"></vxe-table-column>
        <vxe-table-column field="roomCost" title="能源费" min-width="80">
          <template v-slot:default="{ row }">
            <span>{{ row.roomCost || 0 }}.00</span>
          </template>
        </vxe-table-column>
        <vxe-table-column field="materialsCost" title="物资费" min-width="80">
          <template v-slot:default="{ row }">
            <span>{{ row.materialsCost || 0 }}.00</span>
          </template>
        </vxe-table-column>
        <vxe-table-column field="beginDate" title="会议开始时间" min-width="150"></vxe-table-column>
        <vxe-table-column field="endDate" title="会议结束时间" min-width="150"></vxe-table-column>
      </vxe-table>
      <vxe-pager
          :loading="loading"
          :current-page="tablePage.page"
          :page-size="tablePage.size"
          :total="tablePage.totalElements"
          background
          @page-change="handlePageChange"
      >
      </vxe-pager>

    </basic-container>
  </div>
</template>

<script>
import api from "@/api/classroom/classroom";
import {mapGetters} from 'vuex';
import XEUtils from "xe-utils";
export default {
  name: "charge-detail",
  data(){
    return{
      loading: false,
      tableData: [],
      MaterialList: [],
      roomList: [], // 教室列表
      purposeList: [], // 用途列表
      statusList: [], // 状态列表
      searchForm: {  //搜索表单
        startTime: [],
        roomId: null,
        status: null,
        typeId: null,
        beginDate: null,
        endDate: null,
      },
      tablePage: {
        total: 0,
        page: 1,
        size: 10,
        background: true,
        totalElements: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.getRoomList();
    this.getPurposeList();
    this.getRoomStatus();
    this.getCompList();
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
  },
  methods:{
    getCompList() {
      this.loading = true;
      const params = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        roomId: this.searchForm.roomId,
        status: this.searchForm.status,
        typeId: this.searchForm.typeId,
        page: this.tablePage.page,
        size: this.tablePage.size,
        text: 7
      }
      api.queryRoomDetailList(params, 'get').then((res) => {
        this.tableData = res.content;
        this.tablePage.totalElements = res.totalElements;
        this.loading = false;
      })
    },
    dateChangebirthday1(val) {
      this.searchForm.beginDate = val ? val[0] : null;
      this.searchForm.endDate = val ? val[1] : null;
    },
    // 获取教室列表
    getRoomList() {
      const params = {}
      api.queryClassroomList(params, 'get').then((res) => {
        this.roomList = res.content;
      })
    },
    // 获取用途列表
    getPurposeList() {
      const params = {}
      api.queryRoomPurpose(params, 'get').then((res) => {
        this.purposeList = res.content;
      })
    },
    // 获取状态列表
    getRoomStatus() {
      api.queryRoomStatus().then((res) => {
        this.statusList = res;
      })
    },
    // 搜索
    search() {
      this.tablePage.page = 1
      this.getCompList();
    },
    resetSearch() {
      this.searchForm = {};
      this.getCompList();
    },
    // 分页发生改变事件 totalElements
    handlePageChange({currentPage, pageSize}) {
      this.tablePage.page = currentPage;
      this.tablePage.size = pageSize;
      this.getCompList();
    },
    toggleExpandEvent({ expanded, row, rowIndex }){

    },
    footerMethod ({ columns, data }) {
        if (this.tableData.length) {
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                    return '合计'
                    }
                    if (columnIndex === 9) {
                    return `${XEUtils.sum(data, 'roomCost')} .00`
                    } else if (columnIndex === 10) {
                    return `${XEUtils.sum(data, 'materialsCost')} .00`
                    }
                    return null
                })
            ]
        } else {
            return []
        }
        
    },
  }
}
</script>

<style scoped>

</style>